<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // ?.
        function main(config) {
            // 原来的判断
            /* 
                注意：
                1、只要 || 前面为 false，无论 || 后面是true还是 false，结果都返回 || 后面的值。
                2、只要 || 前面为 true，无论 || 后面是true还是 false，结果都返回 || 前面的值。
                3、只要 && 前面是 false，无论 && 后面是true还是 false，结果都将返 && 前面的值;
                4、只要 && 前面是 true，无论 && 后面是true还是false，结果都将返 && 后面的值;
            */
            // const dbHost = config && config.db && config.db.host;
            // const dbHost = config.db.host;//如果不判断 到时候要是没有传递该属性会报错
            // console.log(dbHost);

            //前边的属性存在，再去读取?.后的的属性
            const dbHost = config?.db?.host;
            console.log(dbHost);
        }

        main({
            db: {
                host: 'localhost',
                username: 'root'
            },
            cache: {
                host: 'localhost',
                username: 'admin'
            }
        })
    </script>
</body>

</html>